import React, {useEffect, useState} from 'react'
import Swiper from 'swiper/js/swiper.js' // 引入js
import 'swiper/css/swiper.min.css' // 引入样式
import '@/style/systemCert.scss'
let proSwiper = null
function SystemCert() {
	const [productIndex, setProductIndex] = useState(0);
	const href = window.location.href;
	const typeName = href.split('?type=') ? href.split('?type=')[1] : '';
   
    const SystemCertData = [

		{
			icon: require('@/images/systemCert/丰源电力科技（涿州）有限公司简介_08.jpg'),
			content: '质量管理体系认证证书'
		},
		{
			icon: require('@/images/systemCert/丰源电力科技（涿州）有限公司简介_09.jpg'),
			content: '环境管理体系认证证书'
		},
		{
			icon: require('@/images/systemCert/丰源电力科技（涿州）有限公司简介_10.jpg'),
			content: '职业健康安全管理体系认证证书'
		},
		]
    
    const initSwiper = () => {
		proSwiper = new Swiper('.pro-swiper', {
			loop: false,
			autoplay: false,//可选选项，自动滑动
			observer:true,
			observeParents:true
		})
	};
    useEffect(() => {
        initSwiper();
		if (typeName) {
			scroll(typeName);
		}
    }, [])
	const scroll = (typeName) => {
		let element = document.getElementById(typeName)
		element.scrollIntoView({ block: 'center', behavior: 'smooth' })
	}
	return (
		<>
			<div className="systemCertBanner">
			</div> 
			<div className="systemCertBox">
				<div className="mainContent">
					<p className="boxTitle" id="systemCert">体系认证</p>
					<div className="systemCertBox">
						<div className="mainContent flexSpaceBetween">
							{SystemCertData.map((item, index) => {
								return (
									<div className="systemCertItem">
										<img src={item.icon}></img>
										<p>{item.content}</p>
									</div>
									)
							})}
						</div>
					</div>
				</div>
				
			</div>
		</>
		
	)
}
 
export default SystemCert